<template>
    <el-upload action="/channel/common/fileupload.json" :before-upload="beforeAvatarUpload" :on-progress="fileProgressEvent" :on-success="success" :show-file-list="false">
        <div v-if="model === 'edit'">
            <div :style="'overflow:hidden;width:'+w+'px;height:'+h+'px;font-size:12px;text-align:center;line-height:'+h+'px;border:1px solid #f2f2f2;border-radius:5px;background:'+bg"  v-if="isBlank(value)">
                点击上传
            </div>
            <el-image v-else :style="'width:' + w +'px;height:' + h + 'px;'" :src="value"></el-image>
            <i v-if="clear" @click.stop="progress = 0;changeValue('');" :style="'position:absolute;top:0px;left:'+(w-15)+'px;color:'" class="el-icon-close"></i>
        </div>
        <div style="font-size:12px;text-align:left;line-height:inherit;color:#67C23A;" v-if="progress > 0">已完成 {{progress}} %</div>
        <div slot="tip" class="tips" v-if="showTip">只能上传的{{fArrayStr(suffix)}}文件</div>
    </el-upload>
</template>
<script>
    export default {
        name:"Upload",
        data() {
            return {
                progress:0
            }
        },
        props:{
            value:{
                type:String,
                default:''
            },
            w:{
                type:Number,
                default:100
            },
            h:{
                type:Number,
                default:100
            },
            size:{
                type:Number,
                default:500
            },
            suffix:{
                type:Array,
                default:()=>{return ['jpg','png','gif','jpeg']}
            },
            model:{
                type:String,
                default:'edit'
            },
            showTip:{
                type:Boolean,
                default:true
            },
            bg:{
                type:String,
                default:''
            },
            clear:{
                type:Boolean,
                default:false
            }
        },
        created(){
        },
        methods: {
            beforeAvatarUpload(){
                this.progress = 0;
                return true;
            },
            fileProgressEvent(event){
                var val = Math.round((event.loaded / event.total) * 100);
                this.progress = val > 99 ? 99  : val;
            },
            success(data){
                this.progress = 100;
                // 不管声明情况重置为0
                if(data.code !== '0'){
                    this.$message.error(data.msg);
                    return;
                }
                this.changeValue(data.data);
            },
            changeValue(val){
                this.$emit('input',val);
                this.$emit('change',val);
            },
            fArrayStr(array){
                return array.join('、');
            }
        }
    }
</script>
<style scoped>
    .tips{width: 100%;text-align: left;font-size: 12px;color:#909399;}
</style>